<template>
	<view class="content display width_750  displayColumn fontSize font_comm">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#000;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">确认订单</text>
			</template>
		</u-navbar>
		<view class="fn_content display  displayColumn width-100 all_item M-T30">
			<view class="fn_first_one display  width-699 displaycenter_aliem" @click="tochangeAddress" v-if="!addressInfo.consignee && selectIndex1 == 1" >
				<view class="fn_first_one_left display  displaycenter_aliem M-L24" >
					<image class="left_image" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/12/28/c9a301306d534e319e5a70345a2963cf.png" mode=""></image>
					<span class="wode_imgs" style="margin-left: 12rpx;">未填写/无默认收货地址</span>
				</view>
				<view class="fn_first_one_right display  displaycenter_aliem M-R24">
					<span class="wode_qutianxie">去填写</span>
					<uni-icons type="right" color="#666666" size="15" style="margin-right: 12rpx;"> </uni-icons>
				</view>
			</view>
			<view class="fn_first_one display  width-699 displaycenter_aliem" @click="tochangeAddress" v-if="addressInfo.consignee && selectIndex1 == 1">
				<view class="fn_first_one_left display  displaycenter_aliem M-L24" >
					<image class="left_image" src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/12/28/c9a301306d534e319e5a70345a2963cf.png" mode=""></image>
					<view class="fn_on_two display displayColumn" style="margin-left: 10rpx;">
						<view class="one_tops display  displaycenter_aliem">
							<span class="fn_names">{{addressInfo.consignee}}  {{addressInfo.phone}}</span>
						</view>
						<view class="one_bottons display  displaycenter_aliem">
							<span class="fn_address">{{addressInfo.province}} {{addressInfo.detailAdress}}</span>
						</view>
					</view>
				</view>
				<view class="fn_first_one_right display  displaycenter_aliem M-R24">
					<span class="wode_qutianxie">修改</span>
					<uni-icons type="compose" color="#666666" size="25" style="margin-right: 12rpx;"> </uni-icons>
				</view>
			</view>
			<view class="fn_content_one display  displayColumn M-T24">
				<span class="fn_txt1 M-L24" style="text-align: left;">{{info.stationName}}</span>
				<view class="grey-lines display M-L24 M-T20"></view>
				<view class="fn_all display  width-100 M-T20">
					<view class="fn_left display ">
						<image class="M-L24"
							style="width: 146rpx;height: 146rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;"
							:src="info.url" mode=""></image>
					</view>
					<view class="fn_right display  displayColumn M-L-16 displaycenter_jus" style="margin-left: 16rpx;">
						<view class="fn_right_one display ">
							<span class="fn_ttxt1">{{info.goodsName}}</span>
						</view>
						<view class="fn_right_two display  displaycenter_aliem" style="margin-top: 60rpx;">
							<span class="fn_txt3">数量</span>
							<view class="fn_wode_all display all_item" style="margin-left: 256rpx;">
								<image @click="add(1)" class="imagess" style="margin-right: 26rpx;"
									src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/12/24/be6ac8fc3adf43f3af784853cb4cea99.png"
									mode=""></image>
								<span class="ones1">{{number}}</span>
								<image @click="add(2)" class="imagess" style="margin-left: 26rpx;"
									src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/12/24/e4fb62fe32764291a26c11456ae8203e.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 按钮邮寄领取和到店领取 -->
			<view class="button_two display  M-T-20 displaycenter_aliem" v-if="info.isVirtual == 1">
				<view class="button_wto_left display ">
					<view @click="change(index)"
						:class="{left_one:selectIndex1 !=index,left_one1:selectIndex1==index, display:true,  all_item:true}"
						v-for="(item,index) in arr" :key="index">
						<span class="font_comm fontSize lingqu_txt">{{item.name}}</span>
					</view>
				</view>
			</view>
			<!-- 付款方思 -->
			<!-- 支付方式 -->
			<view class="zhifustyle display  displayColumn width-100 M-T36 all_item">
				<view class="zhifustyle_all display  displayColumn">
					<!-- 余额 -->
					<view class="one display  displaycenter_aliem" @click="cahngeindex(1)">
						<view class="left display  displaycenter_aliem">
							<img style="margin-left: 24rpx;" class="imgs" src="@/static/img2/Group_1097.png" alt="" />
							<span class="fontSize font_comm" style="margin-left: 20rpx;">余额</span>
						</view>
						<view class="right display  all_item">
							<view :class="{circle:selectIndex!=1,circle1:selectIndex==1, display:true, all_item:true}">
								<view class="nei_circle" v-if="selectIndex==1">

								</view>
							</view>
						</view>
					</view>
					<view class="wode_line display "></view>
					<!-- 洗车券 -->
					<view class="one display  displaycenter_aliem" @click="cahngeindex(2)" v-if="false">
						<view class="left display  displaycenter_aliem">
							<img style="margin-left: 24rpx;" class="imgs" src="@/static/img2/weixinlogo.png" alt="" />
							<span class="fontSize font_comm" style="margin-left: 20rpx;">洗车券（2张洗车券）</span>
						</view>
						<view class="right display  all_item">
							<view :class="{circle:selectIndex!=2,circle1:selectIndex==2, display:true, all_item:true}">
								<view class="nei_circle" v-if="selectIndex==2">
								</view>
							</view>
						</view>
					</view>
					<view class="wode_line display "></view>
					<!-- 微信支付 -->
					<view class="one display  displaycenter_aliem" @click="cahngeindex(3)">
						<view class="left display  displaycenter_aliem">
							<img style="margin-left: 24rpx;" class="imgs" src="@/static/img2/weixin.png" alt="" />
							<span class="fontSize font_comm" style="margin-left: 20rpx;">微信支付</span>
						</view>
						<view class="right display  all_item">
							<view :class="{circle:selectIndex!=3,circle1:selectIndex==3, display:true, all_item:true}">
								<view class="nei_circle" v-if="selectIndex==3">

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 选择门店 -->
			<view class="selectmendian display " style="margin-top: 20rpx;" v-if="selectIndex1 == 0 && info.isVirtual == 1">
				<view class="selectmendian_all display displaycenter_aliem  L-R-ALL">
					<view class="selectmendian_all_left display displaycenter_aliem">
						<span class="font_comm fontSize select_txt M-L-24">选择门店</span>
					</view>
					<view class="selectmendian_all_right display  displaycenter_aliem M-R-24" @click="openPopup">
						<span
							class="font_comm fontSize huixian_txt">{{addressArr[nameSelect].stationName || '选择门店后这里回显名称'}}</span>
						<!-- <span class="font_comm fontSize huixian_txt" v-else>{{addressArr[nameSelect].name}}</span> -->
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>
			</view>

		</view>


		<u-popup :show="flag" mode="bottom" round="20" :safeAreaInsetBottom="false">
			<view class="display  popup_all displayColumn">
				<view class="title_delete display displaycenter_aliem ">
					<span class="fontSize font_comm lingqu_txt">选择领取门店</span>
					<uni-icons class="delete_icon " style="z-index: 1000000;" type="closeempty" size="24"
						@click="closeOpen"></uni-icons>
				</view>
				<scroll-view class="display displayColumn" scroll-y="true" style="height: 800rpx;"
					@scrolltolower="scrolltolower" lower-threshold="50">
					<!-- 隔离 -->
					<view class="display " style="width: 100%;height: 72rpx;"></view>
					<view class="one display  all_item" v-for="(item,index) in addressArr" :key="index">
						<detailsVue @fatherMethod="fatherMethod" :item="item"></detailsVue>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!--底部导航 -->
		<view class="bottom_pos ">
			<view class="fn_bottoms display  width-100 all_item" style="height: 166rpx;">
				<span class="fn_btn_txt M-L30">金额：￥<span
						style="font-size: 40rpx;">{{Number(info.realPrice)*number}}</span></span>
				<button class="fn_btnss display all_item" @click="tozhifu">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入组件
	import detailsVue from './details.vue';


	export default {
		components: {
			detailsVue
		},
		data() {
			return {
				info: {},
				flag: false,
				number: 1,
				selectIndex: 1,
				selectIndex1: 0,
				arr: [{
					name: '到店领取',
				}, {
					name: '邮寄领取'
				}],
				addressArr: [],
				nameSelect: null,
				addressInfo:{}
			}
		},
		onShow(){
			if(this.info.isVirtual == 1){	//非虚拟商品
				this.getaddress();
			}
		},
		onLoad(options) {
			this.info = JSON.parse(options.info);
			if(this.info.isVirtual == 1){	//非虚拟商品
				this.getLists();
				// 获取地址
				this.getaddress();
			}
			
			console.log(this.info)
		},
		methods: {
			getaddress(){
				let data = {
					isDefault:1
				}
				this.$req.get('/xcx/userAdress/getUserAdress',data).then(res=>{
					console.log(res)
					this.addressInfo = res.data.data[0]
					console.log(this.addressInfo)
				})
			},
			getLists() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						let data = {
							lng: res.longitude,
							lat: res.latitude
						}
						that.$req.get('/xcx/petrolStation/list', data).then(res => {
							res.data.rows.forEach(item => {
								that.$set(item, 'flag', false)
							})
							that.addressArr = res.data.rows;

							console.log(that.addressArr)
						})
					}
				});

			},
			fatherMethod(e) {
				console.log(e);
				for (let i = 0; i < this.addressArr.length; i++) {
					if (this.addressArr[i].stationName == e) {
						this.addressArr[i].flag = !this.addressArr[i].flag;
						if (this.addressArr[i].flag) {
							this.nameSelect = i;
							for (let j = 0; j < this.addressArr.length; j++) {
								if (i != j) {
									this.addressArr[j].flag = false;
								}
							}
						}else{
							for(let m=0;m<this.addressArr.length;m++){
											if(this.addressArr[m].flag){
												this.nameSelect = m;
												
											}
										}
						}
					}
				}
			},
			cahngeindex(index) {
				this.selectIndex = index;
				// 将类型传入data
				console.log(index)

			},
			change(e) {
				this.selectIndex1 = e;
			},
			// 选则地址
			tochangeAddress(){
				this.$tab.navigateTo('/packageC/addressMange/addressMange')
			},
			tozhifu() {
				// 确认兑换
				// 余额支付
				if(this.addressInfo == null && this.info.isVirtual == 1 && this.selectIndex1 == 1){
					this.$modal.msg('请选择邮寄地址')
					return false
				}
				if(this.nameSelect == null && this.info.isVirtual == 1 && this.selectIndex1 == 0){
					this.$modal.msg('请选择领取门店')
					return false
				}
				let receiveStationName = this.info.stationName;
				let receiveStationAdress = this.info.address;
				if(this.selectIndex1 == 0 && this.info.isVirtual == 1){
					receiveStationName = this.addressArr[this.nameSelect].stationName;
					receiveStationAdress = this.addressArr[this.nameSelect].address;
				}
				if (this.selectIndex == 1) {
					this.$modal.loading('加载中');
					let data = {
						goodsId: this.info.id,
						goodsPayType: 2,
						amount: this.number,
						postType: this.selectIndex1, //0自取 1邮寄
						adressId: this.addressInfo.id, //用户地址ID
						postReceiveStationName: receiveStationName, //领取站点名称,
						postReceiveStationAdress: receiveStationAdress, //领取站点地址
					}
					console.log(data);
					this.$req.post('/xcx/productUserOrder', data).then(res => {
						console.log(res)
						this.$modal.closeLoading();
						if(res.data.code==200){
							this.$modal.msg(res.data.msg);
							setTimeout(()=>{
								this.$tab.navigateTo('/packageC/dingdanDetails/dingdanDetails?id='+res.data.data.id)
							},500)
						}else{
							this.$modal.msg(res.data.msg);
						}
						
					})

				}else{
					this.$modal.loading('加载中')
					let data = {
						goodsId: this.info.id,
						goodsPayType: 3,
						amount: this.number,
						postType: this.selectIndex1, //0自取 1邮寄
						adressId: this.addressInfo.id, //用户地址ID
						postReceiveStationName: receiveStationName, //领取站点名称,
						postReceiveStationAdress: receiveStationAdress, //领取站点地址
					}
					console.log(data);
					// 微信支付
					this.$req.post('/pay/productOrder',data).then(res=>{
						// console.log(res)
						this.$modal.closeLoading();
						if(res.data.code==200){
							let mdata = res.data.data
							let that = this
							uni.requestPayment({
								"timeStamp": `${mdata.timeStamp}`,
								"nonceStr": mdata.nonceStr,
								"package": mdata.packages,
								"signType": mdata.signType,
								"paySign": mdata.paySign,
								success(res1) {
									console.log(res1)
									console.log(mdata.id)
									// 支付成功  跳转
									that.$tab.navigateTo('/packageC/dingdanDetails/dingdanDetails?id='+mdata.id)
									
								},
								fail(e) {
									console.log(e)
								}
							})
						}else{
							this.$modal.msg(res.data.msg);
						}
					})
					
					return false;
					let that = this
					uni.requestPayment({
						"timeStamp": `${data.timeStamp}`,
						"nonceStr": data.nonceStr,
						"package": data.packages,
						"signType": data.signType,
						"paySign": data.paySign,
						success(res) {
							console.log(res)
							// 支付成功  跳转
							if(that.data.artificialServiceType == '1'){
								that.$tab.navigateTo(`/packageB/appointStatus/appointStatus?id=${id}`)
							}else{
								that.$tab.navigateTo(`/packageB/orderDetails/orderDetails?id=${id}`)
							}
							
						},
						fail(e) {
							console.log(e)
						}
					})
				}
				// this.$tab.navigateTo('/packageC/dingdanDetails/dingdanDetails')
			},
			// 打开弹窗
			openPopup() {
				this.flag = true;
			},
			closeOpen() {
				this.flag = false;
			},
			add(e) {
				if (Number(this.info.inventory) <= this.number) {
					this.$modal.msg('不可超过库存量');
					return false
				}
				if (e == 1) {
					if (this.number == 1) {
						return false;
					}
					this.number--
				} else {
					this.number++
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.left_image{
		width: 36rpx;
		height: 36rpx;
	}
	.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}

	.fn_content_one {
		width: 690rpx;
		// height: 274rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_txt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.grey-lines {
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
	}

	.fn_ttxt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_txt3 {
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
	}

	.fn_wode_all {
		width: 176rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		border: 2rpx solid #E6E6E6;
	}

	.colors {
		// width: 16rpx;
		// height: 3rpx;
		// background: #000000;
		// border-radius: 60rpx 60rpx 60rpx 60rpx;
		font-size: 30rpx;
	}

	.ones1 {
		font-weight: 600;
		font-size: 24rpx;
		color: #000000;
	}

	.imagess {
		width: 16rpx;
		height: 16rpx;
	}

	.fn_content_two {
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		width: 690rpx;
		// height: 190rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.zhifustyle_all {
		width: 690rpx;
		height: 292rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.one {
			flex: 1;
			justify-content: space-between;

			.left {
				height: 100%;
				min-width: 150rpx;

				span {
					font-weight: 600;
					font-size: 30rpx;
					color: #000000;
				}
			}

			.right {
				width: 100rpx;
				height: 100%;

				.circle1 {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 2rpx solid #126BC9;

					.nei_circle {
						width: 24rpx;
						height: 24rpx;
						background: #126BC9;
						border-radius: 50%;
					}
				}

				.circle {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 2rpx solid #999999;

					.nei_circle {
						width: 24rpx;
						height: 24rpx;
						background: #126BC9;
						border-radius: 50%;
					}
				}
			}
		}
	}

	.imgs {
		width: 40rpx;
		height: 40rpx;
	}

	.bottom_pos {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 166rpx;
		background: rgba(255, 255, 255, 0.8);
		box-shadow: 0rpx -6rpx 47rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.fn_btnss {
		width: 406rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.fn_btn_txt {
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}

	// 到店领取
	.button_two {
		width: 100%;
		height: 84rpx;

		.button_wto_left {
			justify-content: space-between;
			width: 100%;
			height: 84rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;

			.left_one {
				width: 330rpx;
				height: 84rpx;
				background: rgba(114, 119, 138, 0.1);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.lingqu_txt {
					font-size: 28rpx;
					color: #72778A;
					line-height: 33rpx;
				}
			}

			.left_one1 {
				width: 330rpx;
				height: 84rpx;
				background: rgba(18, 107, 201, 0.1);
				border: 2rpx solid;
				border-image: linear-gradient(90deg, rgba(23, 105, 143, 1), rgba(173, 157, 246, 1), rgba(23, 105, 143, 1)) 2 2;
				border-radius: 12rpx;

				.lingqu_txt {
					font-weight: 600;
					font-size: 28rpx;
					color: #126BC9;
				}
			}
		}
	}

	.selectmendian {
		width: 100%;
		height: 82rpx;

		.selectmendian_all {
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			width: 100%;
			height: 82rpx;
			justify-content: space-between;

			.select_txt {
				font-weight: 400;
				font-size: 24rpx;
				color: #212121;
				line-height: 28rpx;

			}

			.huixian_txt {
				font-size: 24rpx;
				color: #72778A;
			}
		}
	}

	.popup_all {
		width: 100%;
		height: 800rpx;

		.title_delete {
			position: absolute;
			width: 100%;
			height: 32rpx;
			background: #fff;
			top: 40rpx;
			justify-content: center;

			.lingqu_txt {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				justify-self: center;
			}

			.delete_icon {
				position: absolute;
				// justify-self: flex-end;
				right: 40rpx;
			}
		}

		.one {
			width: 100%;
			height: 120rpx;
		}
	}
	.fn_first_one{
		justify-content: space-between;
		width: 690rpx;
		// min-height: 88rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.wode_imgs{
		font-weight: 400;
		font-size: 28rpx;
		color: #212121;
	}
	.wode_qutianxie{
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}
	.fn_names{
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_address{
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		width: 376rpx;
		text-align: left;
		margin-top: 8rpx;
	}
</style>